@{
    ViewBag.Title = "Form Extended";
}
<h3>Form Extended
   <small>New elements to extend the classic functions</small>
</h3>
<!-- START panel-->
<div class="panel panel-default">
   <div class="panel-heading">Form elements</div>
   <div class="panel-body">
      <form method="get" action="#" class="form-horizontal">
         <fieldset>
            <legend>New Components</legend>
            <div class="form-group">
               <label class="col-sm-2 control-label">Slider
                  <br/>
                  <small>Classic, range and vertical</small>
               </label>
               <div class="col-sm-4">
                  <input data-ui-slider="" type="text" value="" data-slider-min="5" data-slider-max="35" data-slider-step="1" data-slider-value="5" data-slider-orientation="vertical" class="slider slider-vertical" />
                  <input data-ui-slider="" type="text" value="" data-slider-min="5" data-slider-max="35" data-slider-step="1" data-slider-value="10" data-slider-orientation="vertical" class="slider slider-vertical" />
                  <input data-ui-slider="" type="text" value="" data-slider-min="5" data-slider-max="35" data-slider-step="1" data-slider-value="15" data-slider-orientation="vertical" class="slider slider-vertical" />
                  <input data-ui-slider="" type="text" value="" data-slider-min="5" data-slider-max="35" data-slider-step="1" data-slider-value="20" data-slider-orientation="vertical" class="slider slider-vertical" />
                  <input data-ui-slider="" type="text" value="" data-slider-min="5" data-slider-max="35" data-slider-step="1" data-slider-value="25" data-slider-orientation="vertical" class="slider slider-vertical" />
                  <input data-ui-slider="" type="text" value="" data-slider-min="5" data-slider-max="35" data-slider-step="1" data-slider-value="30" data-slider-orientation="vertical" class="slider slider-vertical" />
                  <br/>
                  <br/>
                  <input data-ui-slider="" type="text" value="" data-slider-min="5" data-slider-max="20" data-slider-step="1" data-slider-value="10" data-slider-orientation="horizontal" class="slider slider-horizontal" />
                  <br/>
                  <br/>
                  <input id="sl2" data-ui-slider="" type="text" value="" data-slider-min="10" data-slider-max="1000" data-slider-step="5" data-slider-value="[250,750]" class="slider" />
               </div>
            </div>
         </fieldset>
         <fieldset>
            <div class="form-group">
               <label class="col-sm-2 control-label">Switch Small</label>
               <div class="col-sm-10">
                  <label class="switch switch-sm">
                     <input type="checkbox" checked="checked" />
                     <span></span>
                  </label>
               </div>
            </div>
            <div class="form-group">
               <label class="col-sm-2 control-label">Switch</label>
               <div class="col-sm-10">
                  <label class="switch">
                     <input type="checkbox" checked="checked" />
                     <span></span>
                  </label>
               </div>
            </div>
            <div class="form-group">
               <label class="col-sm-2 control-label">Switch Large</label>
               <div class="col-sm-10">
                  <label class="switch switch-lg">
                     <input type="checkbox" checked="checked" />
                     <span></span>
                  </label>
               </div>
            </div>
            <div class="form-group">
               <label class="col-sm-2 control-label">Switch Radio</label>
               <div class="col-sm-10">
                  <label class="switch switch-lg">
                     <input type="radio" checked="checked" name="radioSwitch" />
                     <span></span>
                  </label>
                  <label class="switch switch-lg">
                     <input type="radio" name="radioSwitch" />
                     <span></span>
                  </label>
               </div>
            </div>
         </fieldset>
         <fieldset>
            <div class="form-group mb">
               <label class="col-sm-2 control-label">Chosen Groups</label>
               <div class="col-sm-10">
                  <select class="chosen-select input-md form-control">
                     <optgroup label="NFC EAST">
                        <option>Dallas Cowboys</option>
                        <option>New York Giants</option>
                        <option>Philadelphia Eagles</option>
                        <option>Washington Redskins</option>
                     </optgroup>
                     <optgroup label="NFC NORTH">
                        <option>Chicago Bears</option>
                        <option>Detroit Lions</option>
                        <option>Green Bay Packers</option>
                        <option>Minnesota Vikings</option>
                     </optgroup>
                     <optgroup label="NFC SOUTH">
                        <option>Atlanta Falcons</option>
                        <option>Carolina Panthers</option>
                        <option>New Orleans Saints</option>
                        <option>Tampa Bay Buccaneers</option>
                     </optgroup>
                     <optgroup label="NFC WEST">
                        <option>Arizona Cardinals</option>
                        <option>St. Louis Rams</option>
                        <option>San Francisco 49ers</option>
                        <option>Seattle Seahawks</option>
                     </optgroup>
                     <optgroup label="AFC EAST">
                        <option>Buffalo Bills</option>
                        <option>Miami Dolphins</option>
                        <option>New England Patriots</option>
                        <option>New York Jets</option>
                     </optgroup>
                     <optgroup label="AFC NORTH">
                        <option>Baltimore Ravens</option>
                        <option>Cincinnati Bengals</option>
                        <option>Cleveland Browns</option>
                        <option>Pittsburgh Steelers</option>
                     </optgroup>
                     <optgroup label="AFC SOUTH">
                        <option>Houston Texans</option>
                        <option>Indianapolis Colts</option>
                        <option>Jacksonville Jaguars</option>
                        <option>Tennessee Titans</option>
                     </optgroup>
                     <optgroup label="AFC WEST">
                        <option>Denver Broncos</option>
                        <option>Kansas City Chiefs</option>
                        <option>Oakland Raiders</option>
                        <option>San Diego Chargers</option>
                     </optgroup>
                  </select>
               </div>
            </div>
            <div class="form-group">
               <label class="col-sm-2 control-label">Chosen Multiple</label>
               <div class="col-sm-10">
                  <select multiple="multiple" class="chosen-select form-control">
                     <option>Dallas Cowboys</option>
                     <option>New York Giants</option>
                     <option>Philadelphia Eagles</option>
                     <option>Washington Redskins</option>
                     <option>Chicago Bears</option>
                     <option>Detroit Lions</option>
                     <option>Green Bay Packers</option>
                     <option>Minnesota Vikings</option>
                     <option>Atlanta Falcons</option>
                     <option>Carolina Panthers</option>
                     <option>New Orleans Saints</option>
                     <option>Tampa Bay Buccaneers</option>
                     <option>Arizona Cardinals</option>
                     <option>St. Louis Rams</option>
                     <option>San Francisco 49ers</option>
                     <option>Seattle Seahawks</option>
                     <option>Buffalo Bills</option>
                     <option>Miami Dolphins</option>
                     <option>New England Patriots</option>
                     <option>New York Jets</option>
                     <option>Baltimore Ravens</option>
                     <option>Cincinnati Bengals</option>
                     <option>Cleveland Browns</option>
                     <option>Pittsburgh Steelers</option>
                     <option>Houston Texans</option>
                     <option>Indianapolis Colts</option>
                     <option>Jacksonville Jaguars</option>
                     <option>Tennessee Titans</option>
                     <option>Denver Broncos</option>
                     <option>Kansas City Chiefs</option>
                     <option>Oakland Raiders</option>
                     <option>San Diego Chargers</option>
                  </select>
               </div>
            </div>
         </fieldset>
         <fieldset>
            <div class="form-group">
               <label class="col-sm-2 control-label">Masked input</label>
               <div class="col-sm-10">
                  <div class="row">
                     <div class="col-sm-6">
                        <input type="text" data-masked="" data-inputmask="'mask': '999-99-999-9999-9'" placeholder="ISBN" class="form-control" />
                        <span class="help-block">data-inputmask="'mask': '999-99-999-9999-9"'</span>
                     </div>
                     <div class="col-sm-6">
                        <input type="text" data-masked="" data-inputmask="'mask': '99/99/9999'" placeholder="Date" class="form-control" />
                        <span class="help-block">data-inputmask="'mask': '99/99/9999"'</span>
                     </div>
                     <div class="col-sm-6">
                        <input type="text" data-masked="" data-inputmask="'mask': '(999) 999-9999'" placeholder="Phone number" class="form-control" />
                        <span class="help-block">data-inputmask="'mask': '(999) 999-9999"'</span>
                     </div>
                     <div class="col-sm-6">
                        <input type="text" data-masked="" data-inputmask="'mask': 'aaaa-9999-aa99-9999'" placeholder="Custom Key" class="form-control" />
                        <span class="help-block">data-inputmask="'mask': 'aaaa-9999-aa99-9999"'</span>
                     </div>
                     <div class="col-sm-6">
                        <input type="text" data-masked="" data-inputmask="'mask': '$ 999.999.999,99'" placeholder="Currency Dolar" class="form-control" />
                        <span class="help-block">data-inputmask="'mask': '$ 999.999.999,99"'</span>
                     </div>
                     <div class="col-sm-6">
                        <input type="text" data-masked="" data-inputmask="'mask': '€ 999.999.999,99'" placeholder="Currency Euro" class="form-control" />
                        <span class="help-block">data-inputmask="'mask': '€ 999.999.999,99"'</span>
                     </div>
                  </div>
               </div>
            </div>
         </fieldset>
          <fieldset>
              <div class="form-group mb">
                  <label class="col-sm-2 control-label mb">DateTimePicker</label>
                  <div class="col-sm-10">
                      <div id="datetimepicker1" class="input-group date">
                          <input type="text" class="form-control">
                          <span class="input-group-addon">
                              <span class="fa fa-calendar"></span>
                          </span>
                      </div>
                  </div>
              </div>
              <div class="form-group mb">
                  <label class="col-sm-2 control-label mb">Time Picker</label>
                  <div class="col-sm-10">
                      <div id="datetimepicker2" class="input-group date">
                          <input type="text" class="form-control">
                          <span class="input-group-addon">
                              <span class="fa fa-clock-o"></span>
                          </span>
                      </div>
                  </div>
              </div>
          </fieldset>
         <fieldset>
            <div class="form-group">
               <label class="col-sm-2 control-label">Tags input
                  <span class="text-sm text-muted">Type and press Enter</span>
               </label>
               <div class="col-sm-10">
                  <input type="text" data-role="tagsinput" value="Amsterdam,Washington,Sydney,Beijing,Cairo" class="form-control" />
               </div>
            </div>
         </fieldset>
         <fieldset>
            <div class="form-group">
               <label class="col-sm-2 control-label">File input</label>
               <div class="col-sm-10">
                  <input type="file" data-classbutton="btn btn-default" data-classinput="form-control inline" class="form-control filestyle" />
               </div>
            </div>
         </fieldset>
         <fieldset>
            <div class="form-group">
               <label class="col-sm-2 control-label">Angular Simple wysiwyg</label>
               <div class="col-sm-10">
                  <div data-role="editor-toolbar" data-target="#editor" class="btn-toolbar btn-editor">
                     <div class="btn-group dropdown">
                        <a data-toggle="dropdown" title="Font" class="btn btn-default">
                           <em class="fa fa-font"></em><b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                           <li><a href="" data-edit="fontName Arial" style="font-family:'Arial'">Arial</a>
                           </li>
                           <li><a href="" data-edit="fontName Sans" style="font-family:'Sans'">Sans</a>
                           </li>
                           <li><a href="" data-edit="fontName Serif" style="font-family:'Serif'">Serif</a>
                           </li>
                        </ul>
                     </div>
                     <div class="btn-group dropdown">
                        <a data-toggle="dropdown" title="Font Size" class="btn btn-default">
                           <em class="fa fa-text-height"></em>&nbsp;<b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                           <li><a href="" data-edit="fontSize 5" style="font-size:24px">Huge</a>
                           </li>
                           <li><a href="" data-edit="fontSize 3" style="font-size:18px">Normal</a>
                           </li>
                           <li><a href="" data-edit="fontSize 1" style="font-size:14px">Small</a>
                           </li>
                        </ul>
                     </div>
                     <div class="btn-group">
                        <a data-edit="bold" data-toggle="tooltip" title="Bold (Ctrl/Cmd+B)" class="btn btn-default">
                           <em class="fa fa-bold"></em>
                        </a>
                        <a data-edit="italic" data-toggle="tooltip" title="Italic (Ctrl/Cmd+I)" class="btn btn-default">
                           <em class="fa fa-italic"></em>
                        </a>
                        <a data-edit="strikethrough" data-toggle="tooltip" title="Strikethrough" class="btn btn-default">
                           <em class="fa fa-strikethrough"></em>
                        </a>
                        <a data-edit="underline" data-toggle="tooltip" title="Underline (Ctrl/Cmd+U)" class="btn btn-default">
                           <em class="fa fa-underline"></em>
                        </a>
                     </div>
                     <div class="btn-group">
                        <a data-edit="insertunorderedlist" data-toggle="tooltip" title="Bullet list" class="btn btn-default">
                           <em class="fa fa-list-ul"></em>
                        </a>
                        <a data-edit="insertorderedlist" data-toggle="tooltip" title="Number list" class="btn btn-default">
                           <em class="fa fa-list-ol"></em>
                        </a>
                        <a data-edit="outdent" data-toggle="tooltip" title="Reduce indent (Shift+Tab)" class="btn btn-default">
                           <em class="fa fa-dedent"></em>
                        </a>
                        <a data-edit="indent" data-toggle="tooltip" title="Indent (Tab)" class="btn btn-default">
                           <em class="fa fa-indent"></em>
                        </a>
                     </div>
                     <div class="btn-group">
                        <a data-edit="justifyleft" data-toggle="tooltip" title="Align Left (Ctrl/Cmd+L)" class="btn btn-default">
                           <em class="fa fa-align-left"></em>
                        </a>
                        <a data-edit="justifycenter" data-toggle="tooltip" title="Center (Ctrl/Cmd+E)" class="btn btn-default">
                           <em class="fa fa-align-center"></em>
                        </a>
                        <a data-edit="justifyright" data-toggle="tooltip" title="Align Right (Ctrl/Cmd+R)" class="btn btn-default">
                           <em class="fa fa-align-right"></em>
                        </a>
                        <a data-edit="justifyfull" data-toggle="tooltip" title="Justify (Ctrl/Cmd+J)" class="btn btn-default">
                           <em class="fa fa-align-justify"></em>
                        </a>
                     </div>
                     <div class="btn-group dropdown">
                        <a data-toggle="dropdown" title="Hyperlink" class="btn btn-default">
                           <em class="fa fa-link"></em>
                        </a>
                        <div class="dropdown-menu">
                           <div class="input-group ml-xs mr-xs">
                              <input id="LinkInput" placeholder="URL" type="text" data-edit="createLink" class="form-control input-sm" />
                              <div class="input-group-btn">
                                 <button type="button" class="btn btn-sm btn-default">Add</button>
                              </div>
                           </div>
                        </div>
                        <a data-edit="unlink" data-toggle="tooltip" title="Remove Hyperlink" class="btn btn-default">
                           <em class="fa fa-cut"></em>
                        </a>
                     </div>
                     <div class="btn-group">
                        <a id="pictureBtn" data-toggle="tooltip" title="Insert picture (or just drag &amp; drop)" class="btn btn-default">
                           <em class="fa fa-picture-o"></em>
                        </a>
                        <input type="file" data-edit="insertImage" style="position:absolute; opacity:0; width:41px; height:34px" />
                     </div>
                     <div class="btn-group pull-right">
                        <a data-edit="undo" data-toggle="tooltip" title="Undo (Ctrl/Cmd+Z)" class="btn btn-default">
                           <em class="fa fa-undo"></em>
                        </a>
                        <a data-edit="redo" data-toggle="tooltip" title="Redo (Ctrl/Cmd+Y)" class="btn btn-default">
                           <em class="fa fa-repeat"></em>
                        </a>
                     </div>
                  </div>
                  <div style="overflow:scroll; height:250px;max-height:250px" class="form-control wysiwyg mt-lg">Type something ...</div>
               </div>
            </div>
         </fieldset>
         <fieldset>
            <div class="form-group">
               <div class="col-sm-4 col-sm-offset-2">
                  <button type="submit" class="btn btn-default">Cancel</button>
                  <button type="submit" class="btn btn-primary">Save changes</button>
               </div>
            </div>
         </fieldset>
      </form>
   </div>
</div>
<!-- END panel-->

@section Styles {
    @Styles.Render("~/bundles/tagsinputCss")
    @Styles.Render("~/bundles/sliderCtrlCss")
    @Styles.Render("~/bundles/chosenCss")
    @Styles.Render("~/bundles/datetimePickerCss")
}
@section Scripts {
    @Scripts.Render("~/bundles/filestyle")
    @Scripts.Render("~/bundles/tagsinput")
    @Scripts.Render("~/bundles/chosen")
    @Scripts.Render("~/bundles/sliderCtrl")
    @Scripts.Render("~/bundles/inputmask")
    @Scripts.Render("~/bundles/wysiwyg")
    @Scripts.Render("~/bundles/moment")
    @Scripts.Render("~/bundles/datetimePicker")
    @Scripts.Render("~/bundles/demoForms")
}
